<template>
  <div >
  <!-- 详情 -->
  <el-drawer :visible.sync="drawer" :with-header="false" title="我是标题" size="40%"  v-loading="loading">
            <el-descriptions :border="true" :column="2" class="margin-top" style="text-align: center;" title>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">用户名</template>
                    <!-- {{ agentDetails.username }} -->
                    <div style="display: flex;align-items: center;">
                        <el-avatar :src="agentDetails.avatar" size="medium" style="margin-right: 10px"></el-avatar>
                        <div style="font-size: 14px;">{{ agentDetails.username }}</div>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">昵称</template>
                    {{ agentDetails.nickname }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">手机号</template>
                    {{ agentDetails.mobile }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">密码</template>
                    {{ agentDetails.password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">关联用户ID</template>
                    {{ agentDetails.with_user }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">收益金币</template>
                    {{ agentDetails.balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">代理币</template>
                    {{ agentDetails.agent_balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">代理级别</template>
                    <div v-if="agentDetails.level == 1"> 一级代理 </div>
                    <div v-else-if="agentDetails.level == 2"> 二级代理 </div>
                    <div v-else-if="agentDetails.level == 3"> 三级代理 </div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">上级代理</template>
                    <div v-if="agentDetails.parent" @click="getAgentDetails(agentDetails.parent.id)" style="cursor: pointer;">
                        <div class='flex align-center' style="cursor: pointer;" @click="getAgentProfit(agentDetails.parent.id)">
                            <!-- <el-avatar :size="36" :src="userInfo.avatar" style="margin-right: 10px;text-align: center;"></el-avatar> -->
                            <el-image style="width: 36px; height: 36px;border-radius:36px"
                                :src="agentDetails.parent.avatar"
                              ></el-image>
                            <div class="pl-10">
                                {{ agentDetails.parent.username }}
                            </div>
                        </div>
                    </div>
                    <div v-if="agentDetails.parent_id == 0">无</div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">保证金</template>
                    {{ agentDetails.deposit }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">付费直播间抽佣比例</template>
                    {{ agentDetails.live_fee_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播间礼物抽佣比例</template>
                    {{ agentDetails.live_gift_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">长视频付费抽佣比例</template>
                    {{ agentDetails.long_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">短视频付费抽佣比例</template>
                    {{ agentDetails.short_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">打赏作品时抽佣比例</template>
                    {{ agentDetails.tipping_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">1V1密聊抽佣比例</template>
                    {{ agentDetails.one_by_one_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">同城空降抽佣比例</template>
                    {{ agentDetails.same_city_rate }}%
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">实名姓名</template>
                    {{ agentDetails.cert_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">实名身份证号码</template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">是否实名认证成功</template>
                    {{ agentDetails.authentication == 0 ? "否" : "是" }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">登录IP</template>
                    {{ agentDetails.login_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">登录时间</template>
                    {{ agentDetails.login_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">创建时间</template>
                    {{ agentDetails.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">修改时间</template>
                    {{ agentDetails.updated_at }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        删除时间
                    </template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>-->
            </el-descriptions>

            <!-- 返利明细 -->
            <div style="padding: 10px;">
                <h4>返利明细</h4>
                <el-table :data="agentProfitList" max-height="340px" size="small" style="width: 100%">
                    <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                    <el-table-column label="下级用户" prop="name">
                        <template slot-scope="scope">
                            <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user_info" :modalShow="false"
                                v-if="scope.row.user_id"></UserInfo>
                        </template>
                    </el-table-column>
                    <el-table-column label="消费金额" prop="user_expend"></el-table-column>
                    <el-table-column label="返利金额" prop="balance"></el-table-column>
                    <el-table-column label="平台抽佣" prop="platform_balance"></el-table-column>
                    <el-table-column label="描述" prop="desc">
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-left: 40%;margin-top: 50px;">
                    <el-pagination :total="agentTotals" @current-change="currentChangeAgent" @next-click="nextClick"
                        @prev-click="prevClick" @size-change="sizeChange" layout="prev, pager, next"></el-pagination>
                </div>
            </div>
        </el-drawer>
  </div>
</template>

<script>
export default {
    props:{
        agent_id: {
            type: [Number,String],
        },
    },
    data(){
        return{
            agentTotals: 0,
            agentProfitList: [],
            drawer:false,
            loading:false,
            agentDetails: {},
            agentProfitQuery: {
                page: 1,
                size: 3
            },
        }
    },
    mounted(){

    },
    methods:{
        
        getAgentDetails(id) {
            this.drawer = true
            this.loading = true
            this.$request.get('/agent/get/' + id).then((res) => {
                console.log('代理信息',res)
                
                this.agentDetails = res
                this.getAgentProfit(id)
                this.loading = false
            }).catch((error) => {
                this.loading = false
            });
        },
        getAgentProfit(id) {
            let that = this
            that.agentProfitQuery.agent_id = id
            this.$request.get('/agent-profit/index', that.agentProfitQuery).then((res) => {
                console.log('返利明细', res)
              // that.agentTotals = res.page.total
                that.agentProfitList = res.items
               

            })
        },
        currentChangeAgent(val) {
            console.log('currentChange', val)
            this.agentProfitQuery.page = val
            this.getAgentProfit()
        },
        nextClick(val) {
            console.log(val)
        },
        prevClick(val) {
            console.log(val)
        },
        sizeChange(val) {
            console.log(val)
        },

        getAgentProfit(id) {
            let that = this
            that.agentProfitQuery.agent_id = id
            this.$request.get('/agent-profit/index', that.agentProfitQuery).then((res) => {
                console.log('返利明细', res)
                that.agentProfitList = res.items
                that.agentTotals = res.page.total

            })
        },

    }
}
</script>

<style lang="scss" scoped>

</style>